<template>
    <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>分类参数</el-breadcrumb-item>
</el-breadcrumb> <br>

<el-card>
        <el-alert
    title="注意：只允许为第三级分类设置相关的参数"
    type="warning"
    show-icon
    :closable="false"
    >
  </el-alert> <br> 

 <div class="block"> 
  <span class="demonstration">选择商品分类：</span> &ensp;
  <el-cascader
    v-model="checkedArr"
    :options="goodsCateData"
    :props="defaultProps"
    @change="handleChange"></el-cascader>
</div>


 <el-tabs v-model="activeName" @tab-click="handledClick"> 
    <el-tab-pane label="动态参数" name="many"> 
        <el-button type="primary" :disabled="isOK" @click="addmanyparamas">添加参数</el-button> <br><br>
  <el-table border :data="manylist" row-key="attr_id">
    <el-table-column type="expand"> 
        <template slot-scope="scope"> 
        <el-tag
 v-for="(item,index) in scope.row.attr_vals" :key="index"
  closable
  :disable-transitions="false"
  @close="handleClose(index,scope.row)">
 {{item}}
</el-tag>
<el-input
  class="input-new-tag inp"
  v-if="scope.row.inputVisible"
  v-model="scope.row.inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm(scope.row,'回车')"
  @blur="handleInputConfirm(scope.row,'失去焦点')"
>
</el-input> 
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
        </template> 
    </el-table-column> 
    <el-table-column label="#" type="index"></el-table-column>
    <el-table-column label="参数名称" prop="attr_name"> </el-table-column>
    <el-table-column label="操作">
         <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="bianji(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="del(scope.row.attr_id)">删除</el-button>
         </template>
    </el-table-column>
  </el-table> 
    </el-tab-pane> 
    <el-tab-pane label="静态参数" name="only">
        



          <el-button type="primary" :disabled="isOK" @click="addmanyparamas">添加参数</el-button> <br><br>
  <el-table border :data="onlylist" row-key="attr_id">
    <el-table-column label="#" type="index"></el-table-column>
    <el-table-column label="参数名称" prop="attr_name"> </el-table-column>
    <el-table-column label="操作">
         <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="bianji(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="del(scope.row.attr_id)">删除</el-button>
         </template>
    </el-table-column>
  </el-table> 
      
      
      
      
      
      
      
      </el-tab-pane> 
  </el-tabs> 

</el-card> 

<!-- 添加的模态框 --> 
<el-dialog title="添加动态参数" :visible.sync="dialogFormVisible"> 
  <el-form :model="form" :rules="rules" ref="formName">
    <el-form-item label="参数名称" prop="attr_name">
      <el-input v-model="form.attr_name" class="add"></el-input>
    </el-form-item> 
  </el-form> 
  <div slot="footer" class="dialog-footer"> 
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="qdaddmanyparamas">确 定</el-button>
  </div> 
</el-dialog> 

<!-- 编辑的模态框 -->
<el-dialog title="编辑动态参数" :visible.sync="dialogFormVisibles"> 
  <el-form :model="forms" :rules="rules" ref="formName">
    <el-form-item label="参数名称" prop="attr_name">
      <el-input v-model="forms.attr_name" class="add"></el-input>
    </el-form-item> 
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisibles = false">取 消</el-button>
    <el-button type="primary" @click="tjbianji">确 定</el-button>
  </div>
</el-dialog>


    </div> 
</template> 
<script>
export default {
  data() {
    return {
      defaultProps: {
        expandTrigger: "hover",
        children: "children",
        label: "cat_name",
        value: "cat_id"
      }, //三级分类的配置
      checkedArr: [], //选中的分类id组成的数组
      goodsCateData: [], //商品的分类的数据
      activeName: "many", //默认为动态的参数
      manylist: [], //动态参数
      onlylist: [], //静态参数
      inputVisible: false,
      inputValue: "",
      form:{   //添加的内容
          attr_name:''
      },
      forms:{   //编辑的内容
          attr_name:'',
          attr_id:0,
      }, 
      dialogFormVisible:false,  //添加
      dialogFormVisibles:false,  //编辑
         rules: {
          attr_name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
         }
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    //打开编辑模态框  并赋值
    bianji(row){
        console.log(row) 
        this.dialogFormVisibles=true
         this.forms.attr_name=row.attr_name
         this.forms.attr_id=row.attr_id
    }, 
  async  tjbianji(){
        console.log("提交编辑") 
        //调用编辑提交参数
        console.log(this.current_cate_id)
        console.log(this.forms.attr_id)
        await this.$API.bjGoodsparamsApi(this.current_cate_id,this.forms.attr_id,{  
           attr_name:this.forms.attr_name,
           attr_sel:this.activeName,
           attr_vals:this.forms.attr_vals
        })
        this.getGoodlist() 
        this.dialogFormVisibles=false
    },
    showInput(row) {
      row.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //添加tag标签
    async handleInputConfirm(row, val) {
      console.log(val);
      if (row.inputValue.trim().length > 0) {
        row.attr_vals.push(row.inputValue);
        await this.$API.bjGoodsparamsApi(this.current_cate_id, row.attr_id, {
          attr_name: row.attr_name,
          attr_sel: this.activeName,
          attr_vals: row.attr_vals.join(",")
        });
      }
      row.inputValue = "";
      row.inputVisible = false;
    },
    //点击删除按钮删除整条数据
   async del(attrid) {  
          await this.$API.delgoodsparamsApi(this.current_cate_id, attrid);  
          this.getGoodlist()    //调用参数列表 
    },
    //删除时触发  删除tag标签
  async  handleClose(i,row) {
      console.log(row,'要删除的内容');
      console.log(i,'下标') 
      row.attr_vals.splice(i,1) 
      //调用删除的接口   编辑提交分类参数
        await this.$API.bjGoodsparamsApi(this.current_cate_id, row.attr_id,{
             attr_name:row.attr_name,
             attr_sel:this.activeName,
             attr_vals:row.attr_vals.join(',')
          }
        )
    },
    //点击添加参数  添加参数
     addmanyparamas(){
        //调用添加参数的接口
        this.dialogFormVisible=true 
    },
    //点击确定添加
    qdaddmanyparamas(){
      console.log(this.form)
      console.log(this.activeName)
           this.$refs.formName.validate(async(valid) => {
          if (!valid) return false 
           //请求接口
          const res=await this.$API.addgoodsparamsApi(this.current_cate_id,{
             attr_name:this.form.attr_name,
             attr_sel:this.activeName,
           })
           console.log(res) 
            //渲染页面
            this.getGoodlist() 
           //关闭模态框
            this.dialogFormVisible=false
            this.form.attr_name=''
        });
    },
    //级联框 选中改变时触发  调用商品参数列表的数据
    handleChange() {
      this.getGoodlist();
    },
    //点击tab栏时触发的事件
    handledClick() {
      console.log(this.activeName);
      this.getGoodlist();
    },
    //获取商品分类的接口
    async getlist() {
      const res = await this.$API.getGoodsCateApi();
      console.log(res);
      this.goodsCateData = res;
      console.log(this.goodsCateData, "goodsCateData");
    },
    //获取商品参数列表
    async getGoodlist(){
      console.log("获取商品参数");
      if (this.checkedArr.length != 3){
        this.$message({
          type: "error",
          message: "您需要设置3级分类，才能添加或者编辑参数"
        });
        this.manylist=[]
        this.onlylist=[] 
        return false;
      } else{
        //获取参数的接口
        const res = await this.$API.getGoodsParamsApi(
          this.current_cate_id,
          this.activeName
        );
        console.log(res, "this.activeName下的分类参数");  
        //区分是动态参数还是静态参数
        if (this.activeName == "many"){
          res.forEach(item => {
            //给每一个添加一个值
            item.inputVisible = false;
            item.inputValue = "";
            item.attr_vals =
              item.attr_vals.length > 0
                ? item.attr_vals.split(",")
                : [];
          });
          // console.log("分割逗号之后的res", res);
          this.manylist = res;
          console.log("动态参数",this.manylist) 
        } else if (this.activeName == "only") {
              res.forEach(item => { 
            //给每一个添加一个值
            item.inputVisible = false;
            item.inputValue = "";
            item.attr_vals =
              item.attr_vals.length > 0
                ? item.attr_vals.split(",")
                : [];
          });
          // console.log("分割逗号之后的res", res);
          this.onlylist = res;
          console.log('静态参数',this.onlylist) 
        }
      }
    }
  },
  computed: {
    //当前的分类id
    current_cate_id() {
      return this.checkedArr[this.checkedArr.length - 1];
    },
    //添加参数按钮禁用
    isOK() {
      return this.checkedArr.length != 3;
    }
  }
};
</script>
<style scoped >
.el-tag {
  margin: 6px 10px;
}
.el-input.inp{
  width: 100px;
}
.add{
  width: 400px;
}
</style>
